<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>主页</title>

    <link rel="stylesheet" type="text/css" href="/css/common.css" th:href="@{/css/common.css}">
    <link rel="stylesheet" type="text/css" href="/css/index.css" th:href="@{/css/index.css}">
    <link rel="stylesheet" type="text/css" href="/iconfont/iconfont.css" th:href="@{/iconfont/iconfont.css}">
    <script th:src="@{/js/jquery.min.js}" ></script>
    <script th:src="@{/js/detail.js}" ></script>
    <script type="text/javascript"  th:src="@{/js/jquery.cookie.js}" ></script>
    <script>
        $(function () {
            var userid = $.cookie('userId')
            if(userid == '' || userid == null){
                window.location.replace("http://localhost:8085/login");
            }
        })
    </script>
</head>
<body>
<div class="w_100 flex flex-column align-center img_bg">
    <!-- 头部 -->
    <div class="nav w_100 flex justify-between align-center py-1" th:fragment="topHeader">
        <div class="flex align-center item_tops">
            <img th:src="@{/images/blog_logo.svg}" class="blog_logo mx-5">
            <a th:href="@{/index}">
                <p class="mx-2 font-mini ">首页</p>
            </a>
            <a th:href="@{/fabu}">
                <p class="mx-2 font-mini ">发布</p>
            </a>
        </div>
        <div class="mr-5 flex align-center item_tops">
            <div class="input_k flex justify-between align-center mr-2">
                <input type="text" placeholder="代码改变世界">
                <i class=" iconfont icon-sousuo mr-2 text-black"
                   style="font-size: 25px;"></i>
            </div>
            <a th:href="@{/regist}">
                <p class="font-mini mx-2 " >注册</p>
            </a>
            <a th:href="@{/login}">
                <p class="font-mini mx-2 ">登录</p>
            </a>
        </div>
    </div>

    <!--  -->
    <div class="flex w_100 ">
        <div class="flex-1 ml-2 mt-4"  th:fragment="leftItem">
            <!-- left -->
            <div class="item_left flex flex-column align-center justify-center">
                <div class="flex align-center ">
<!--  th:src="@{/images/boke_touxiang.svg}"  -->
                    <img th:src="@{/images/left_img/l0.svg}">
                    <p class="text-mini ml-1">分类</p>
                </div>
                <div class="flex align-center mt-2">
                    <img th:src="@{/images/left_img/l1.svg}">
                    <p class="text-mini ml-1">精华</p>
                </div>
                <div class="flex align-center mt-2">
                    <img th:src="@{/images/left_img/l2.svg}">
                    <p class="text-mini ml-1">候选</p>
                </div>
                <div class="flex align-center mt-4">
                    <img th:src="@{/images/left_img/l3.svg}" >
                    <p class="text-mini ml-1">订阅</p>
                </div>
                <div class="flex align-center mt-2">
                    <img th:src="@{/images/left_img/l4.svg}" >
                    <p class="text-mini ml-1">关注</p>
                </div>
                <div class="flex align-center mt-2">
                    <img th:src="@{/images/left_img/l5.svg}" >
                    <p class="text-mini ml-1">我评</p>
                </div>
                <div class="flex align-center mt-2">
                    <img th:src="@{/images/left_img/l6.svg}" >
                    <p class="text-mini ml-1">我赞</p>
                </div>
                <div class="flex align-center mt-2">
                    <img th:src="@{/images/left_img/l7.svg}" >
                    <p class="text-mini ml-1">更多</p>
                </div>
            </div>
        </div>
        <!-- center -->
        <div class="flex-4 flex flex-column align-center">
            <img th:src="@{/images/center_img/c_swipt0.png}" class="img_swipt mt-4" id="imgsw">
            <div class="mt-2 item_paihang flex flex-column ">
                <div class="center_top flex justify-between flex-2 ">
                    <div class="flex-1 flex align-center px-2 border-right">
                        <img th:src="@{/images/center_img/paihang0.jpeg}" class="img_l">
                        <div class="ml-2">
                            <p class="text-mini">承接公司、企业、博客网...</p>
                            <p class="t_min mt-1">前言如果你有搭建网站的意向，而自己又没有那
                                个技术，我来帮你！本站承接公司、论坛...</p>
                        </div>
                    </div>
                    <div class="flex-1 flex align-center p-3">
                        <img th:src="@{/images/center_img/paihang1.jpeg}" class="img_l">
                        <div class="ml-2">
                            <p class="font-mini">承接公司、微商、博客网...</p>
                            <p class="t_min mt-1">前言如果你有搭建网站的意向，而自己又没有那
                                个技术，我来帮你！本站承接公司、论坛...</p>
                        </div>
                    </div>
                </div>
                <div class="flex-4 flex flex-wrap p-2 item_list">

                        <div class="flex align-center " th:each="items,index : ${topArticle}" style="width: 380px;">
                            <div class="item_index">
                                <p class="text-center text-white" th:text="${index.count}"></p>
                            </div>
                            <a th:href="@{/detail/(articleId=${items.id})}">
                                <p class="px-1 text_data hover-bg-light-pink" th:text="${items.title}"></p>
                            </a>
                            <p class="text-grey t_min">08-25</p>
                        </div>

                </div>
                <div class="mt-5">
                    <a th:href="@{/detail/(articleId=${item.id})}" th:each="item,c : ${articleList}">
                    <div class="item_bl_list p-2 flex align-center mt-2" >
                        <img th:src="@{/images/center_img/img_list0.jpeg}" class="item_leftImg">
                        <div class="ml-2">
                            <div class="flex align-center">
                                <div class="item_ding" th:if="${c.index}==0">
                                    <p class="text-white text-center">顶置</p>
                                </div>
                                <p class="font-weight-bold font-small ml-05" th:text="${item.title}"></p>
                            </div>
                            <div class="my-3">
                                <p class="t_min ellipsis" th:text="${item.center}"></p>
                            </div>
                            <div class="flex align-center">
                                <img th:src="@{/images/center_img/center_toux.png}" class="img_toux" >
                                <p class="t_min ml-1" th:text="${item.users[0].nikeName}"></p>
                                <p class="t_min  ml-2 minColor">2021-05-25</p>
                                <p class="t_min  ml-2 minColor">62评论</p>
                                <p class="t_min  ml-2 minColor">4.7K阅读</p>
                            </div>
                        </div>
                    </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- right -->
        <div class="flex-2 flex flex-column align-center mt-4" th:fragment="rightItem">
            <div class="right_toux flex flex-column">
                <div class="flex-2"></div>
                <div class="flex-4 flex flex-column align-center bg-white item_bt position-relative">
                    <img th:src="@{/images/center_img/center_toux.png}" class="position-absolute">
                    <p class="font-weight-bold  mt-5" th:text="${nikeName}"></p>
                    <p class="minColor text_data mt-05 px-3 text-center" th:text="${signature}"></p>
                    <div class="item_data_user flex align-center justify-center mt-1">
                        <div class="flex flex-column align-center  flex-1 py-2">
                            <p class="font-mini ">5189</p>
                            <p class="text_data ">文章</p>
                        </div>
                        <div class="flex flex-column align-center  flex-1 py-2">
                            <p class="font-mini ">5189</p>
                            <p class="text_data ">评论</p>
                        </div>
                        <div class="flex flex-column align-center  flex-1 py-2">
                            <p class="font-mini">5189</p>
                            <p class="text_data">浏览</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
